
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        body{
            background: #eee;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
      th,td{
          padding: 10px 40px;
          text-align: center;
      }
      th{
          background: blue;
      }
      td{
          background: #fff;
      }

      .tab_img>img{
        width: 20px;
        cursor: pointer;
      }
      .tab>tr>td:nth-child(3){
          width: 250px;
      }
      .form>label{
          display: block;
      }
      .form{
          border: 1px solid ;
          width: 400px;
          text-align: center;
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background: #fff;
          display: none;
      }
      .form>h2{
          line-height: 40px;
          background:blue;
      }
      .form>.pop{
          position: absolute;
          top: 0;
          right:0 ;
          border: 1px solid;
          width: 40px;
          line-height: 38px;
          cursor: pointer;
      }
      .form>label>span{
          width: 100px;
          border: 1px solid;
          display: inline-block;
          line-height: 25px;
          
      }
      .form>label{
          margin-top: 20px;
      }
      .form>label>input{
          height: 30px;
          outline: none;
          padding-left: 10px;
          width: 200px
      }
      .form>button{
          width: 300px;
          margin: 20px auto;
          line-height: 35px;
          background: blue;
          border: none;
      }
      .show{
          display: block;
      }

    </style>
</head>
<body>
    <button type="button" class="show">添加用户</button>
    <table  class="tab" border="1" >
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>邮箱</th>
            <th>删除</th>
        </tr>
       
    </table>
    <div class="form">
        <h2>新增用户列表</h2>
        <span class="pop">X</span>
        <label >
            <span>姓名</span>
            <input type="text" name="" id="user">
        </label>
        <label >
            <span>年龄</span>
            <input type="number" name="" id="age">
        </label>
        <label >
            <span>邮箱</span>
            <input type="email" name="" id="email">
        </label>
        <button type="submit" id='sub'>提交用户</button>
    </div>
    <script>
        // 获取点击添加用户按钮
        let show=document.querySelector('.show')
        // 获取表单狂
        let form=document.querySelector('.form')
        // 获取表单上面的X 点击关闭模态框
        let pop =document.querySelector('.pop') 
        // 获取提交用户按钮
        let sub=document.querySelector('#sub')
        // 创建点击事件  点击显示模态框
        let obj={}
        // 获取用户名
        obj.user=document.querySelector('#user')
        // 获取年龄
        obj.age=document.querySelector('#age')
        // 获取邮箱
        obj.email=document.querySelector('#email')
        // console.log(inps);
        // 获取表格
        let tab=document.querySelector('table')
        show.addEventListener('click',function(){
            form.classList.add('show')
        })
        pop.addEventListener('click',function(){
            form.classList.remove('show')
        })
        // 给提交用户按钮创建点击事件
        sub.addEventListener('click',function(){
            if(user.value!=''&&age.value!=''&&email.value!=''){
                 // 创建一个节点
            let tr=document.createElement('tr')
            // 修改节点的内容
            tr.innerHTML=`<td>${user.value}</td>
            <td>${age.value}</td>
            <td>${email.value}</td>
            <td class="tab_img"><img src="./1.png" alt="" class='del'></td>`
            // 将创建的节点提交
            tab.appendChild(tr)
            }else{
                alert('不能为空')
            }
           for(let k in obj){
               obj[k].value=''
           }

        })
        tab.addEventListener('click',function(e){
            if(e.target.classList=='del'){
                e.target.parentNode.parentNode.remove()
                form.classList.remove('show')
            }
        })
    </script>
</body>
</html>